<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="renderer" content="webkit">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="0" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
		body{overflow-x: hidden}
        .advantage{padding-top: 80px;padding-bottom: 80px;}
        .advantage ul{margin-top: 50px;overflow: hidden}
        .advantage ul li{float: left;width: 14%;margin: 0 11px;text-align: center}
        .advantage .advantage-icon{
            margin: 0px auto;
            padding: 0;
            display: block;
            width: 148px;
            height: 138px;
        }
        .advantage .advantage-icon1{
            background: url(images/sj.png) no-repeat;
            background-size: 100%;
        }
        .advantage .advantage-icon1:hover{
            background: url(images/a_sj.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon2{
            background: url(images/cl.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon2:hover{
            background: url(images/a_cl.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon3{
            background: url(images/sg.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon3:hover{
            background: url(images/a_sg.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon4{
            background: url(images/fw.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon4:hover{
            background: url(images/a_fw.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon5{
            background: url(images/gc.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon5:hover{
            background: url(images/a_gc.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon6{
            background: url(images/xt.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon6:hover{
            background: url(images/a_xt.png) no-repeat;
                background-size: 100%;
        }
        .advantage .txt h3{
            line-height: 24px;
            margin-top: 20px;
            color: #555;
            font-size: 16px;
            font-weight: bold;
        }
        .advantage .txt span{
            font-family: Arial;
            color: #555;
            font-size: 10px;
        }
        .advantage .txt p{
            color: #555;
            font-size: 13px;
        }
		
        .news{padding-bottom: 60px;}
        .news .en-tit{margin-left: -28px;}
        .news .line2{left: 65px;}
        .university .en-tit{margin-left: -45px;}
        .university .line2{left: 100px;}
        .university{
          overflow: hidden;
          padding-bottom: 80px;
          position: relative;
          left:0;
          top:0;
          zoom:1;
          white-space: nowrap;
          width: 100%;
        }
        .university ul{
          margin-top: 50px;
          position: relative;
          left:0;
          top:0;
        }
        .university ul li{
            position: relative;
            width: 275px;
            border: 1px solid #dddddd;
            display: inline-block;
            padding: 0;
            border-radius: 0;
            margin-right: 10px;
          }
          .university  li img{
            width: 100%;
            height: 208px;
          }
          .university  li span{
            display: block;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #333;
            background: #ffffff;
            font-size: 18px;
          }
          .product{padding-bottom: 80px;}
          .case{padding-bottom: 80px;}
          .case .en-tit{margin-left: -24px;}
          .case .line2{left: 60px; }
          .product .en-tit{margin-left: -49px;}
          .product .line2{left: 96px; }
        .university .prev,.university  .next{
          display: inline-block;
          height: 60px;
          line-height: 60px;
          width: 42px;
          background: rgba(0,0,0,0.6);
          position: absolute;
          top:50%;
          margin-top: -30px;
          z-index: 100;
          cursor: pointer;
          color: rgba(255,255,255,0.8);
          text-align: center;
          font-size: 20px;
          display: none;
        }
        .university .prev{left: 0;} 
        .university .next{right: 0;}
        .company-info{margin-top: 50px;padding-bottom: 80px;overflow: hidden}
        .company-info .left{float: left;width: 580px;margin-right: 20px;}
        .company-info h3{font-weight: bold;font-size: 20px;letter-spacing: 3px;}
        .company-info h4{color:#39325e;font-size: 16px;margin-top: 12px;font-weight: bold; letter-spacing: 3px;}
        .company-info .right{float: right;}
        .company-info .left .line{width: 115px;height: 1px ;background: #39325e;margin: 30px 0;}
        .company-info .left p{font-size: 13px;margin-bottom: 30px;}
        .right {width: 535px;  height: 330px; }
        .right img{width: 100%;height: 100%;}
        .honor li img{height: 374px}
        .honor .en-tit{margin-left: -31px;}
        .honor .line2{left: 80px; }
        .honor .en-tit{margin-left: -31px;}
        .honor .line2{left: 80px; }
        .product .en-tit{margin-left: -46px;}
          .product .line2{left: 100px; }
        .introduction .en-tit{margin-left: -68px;}
        .introduction .line2{left: 150px; }
        .carousel-inner{height:414px;width: 100%}
        .carousel-inner .item{height:100%;width: 100%}
        .carousel-inner .item img{height:100%;width: 100%}
        
		.jssora05l, .jssora05r {
	display: block;
	position: absolute;
	/* size of arrow element */
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: url('${path}/resource/images/a17.png') no-repeat;
	overflow: hidden;
}

.jssora05l {
	background-position: -10px -40px;
}

.jssora05r {
	background-position: -70px -40px;
}

.jssora05l:hover {
	background-position: -130px -40px;
}

.jssora05r:hover {
	background-position: -190px -40px;
}

.jssora05l.jssora05ldn {
	background-position: -250px -40px;
}

.jssora05r.jssora05rdn {
	background-position: -310px -40px;
}

.jssora05l.jssora05lds {
	background-position: -10px -40px;
	opacity: .3;
	pointer-events: none;
}

.jssora05r.jssora05rds {
	background-position: -70px -40px;
	opacity: .3;
	pointer-events: none;
}
/* jssor slider thumbnail navigator skin 01 css */
/*.jssort01 .p            (normal).jssort01 .p:hover      (normal mouseover).jssort01 .p.pav        (active).jssort01 .p.pdn        (mousedown)*/
.jssort01 .p {
	position: absolute;
	top: 0;
	left: 0;
	width: 72px;
	height: 72px;
}

.jssort01 .t {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.jssort01 .w {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.jssort01 .c {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 68px;
	height: 68px;
	border: #FFFFFF 2px solid;
	box-sizing: content-box;
	_background: none;
}

.jssort01 .pav .c {
	top: 0px;
	_top: 0px;
	left: 0px;
	_left: 0px;
	width: 68px;
	height: 68px;
	border: #39325e 2px solid;
	_border: #fff 2px solid;
	background-position: 50% 50%;
}

.jssort01 .p:hover .c {
	top: 0px;
	left: 0px;
	width: 68px;
	height: 68px;
	border: #39325e 2px solid;
	background-position: 50% 50%;
}

.jssort01 .p.pdn .c {
	background-position: 50% 50%;
	width: 68px;
	height: 68px;
	border: #000 2px solid;
}

* html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c
	{ /* ie quirks mode adjust */
	width /**/: 72px;
	height /**/: 72px;
}
#jssor_1,.advantage,.university{overflow-x: hidden;}
@media screen and (max-width: 768px) {
		    .advantage ul li{width:100%;margin-bottom:15px;}
		    .university ul{text-align: center;}
		    .university ul li{margin-right:0}
		    .university{white-space: normal!important;}
		    .company-info .left{width:100%}
		}
</style>
</head>
<body class="">
	<jsp:include page="_top.jsp"></jsp:include>

	<cms:ad var="syBanner" code="syBanner"></cms:ad>
	<div id="myCarousel" class="carousel slide" data-ride="carousel">
		<!-- 轮播（Carousel）指标 -->
		<ol class="carousel-indicators">
			<c:forEach items="${syBanner }" var="item" varStatus="count">
				<li data-target="#myCarousel" data-slide-to="${count.index}"
					<c:if test="${count.index eq 0 }">class="active"</c:if>></li>
			</c:forEach>
		</ol>
		<!-- 轮播（Carousel）项目 -->
		<div class="carousel-inner">
			<c:forEach items="${syBanner }" var="item" varStatus="count">
				<div class='<c:if test="${count.index eq 0 }">active</c:if> item'>
					 <img src="${item.adImg }"
						alt="${item.adTitle}">
				</div>
			</c:forEach>
		</div>
		<!-- 轮播（Carousel）导航 -->
		<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
		<a class="carousel-control right" href="#myCarousel" data-slide="next">
		</a>
	</div> 
	<div class="row">
		<div class="col-md-12" style="padding:0">
			<div id="jssor_1"
				style="z-index:-100;position: relative; margin: 0 auto; top: 0px; left: 0px; width: 800px; height: 456px; overflow: hidden;  background-color: #24262e;">
				<div data-u="slides"
					style="cursor: default; position: relative; top: 0px; left: 0px; width: 800px; height: 456px; overflow: hidden;">

					<c:forEach items="${syBanner }" var="item" varStatus="count">

						<div data-p="144.50">
							<img data-u="image" src="${item.adImg }" /> <img data-u="thumb"
								src="${item.adImg }" />
						</div>

					</c:forEach>
					<a data-u="any" href="#" style="display: none">Image Gallery</a>
				</div>
				<!-- Thumbnail Navigator -->
				<div data-u="thumbnavigator" class="jssort01"
					style="background: #f9f9f9; position: absolute; left: 0px; bottom: 0px; width: 800px; height: 0;"
					data-autocenter="1">
					<!-- Thumbnail Item Skin Begin -->
					<div data-u="slides" style="cursor: default;display:none;">
						<div data-u="prototype" class="p">
							<div class="w">
								<div data-u="thumbnailtemplate" class="t"></div>
							</div>
							<div class="c"></div>
						</div>
					</div>
					<!-- Thumbnail Item Skin End -->
				</div>
				<!-- Arrow Navigator -->
				<!-- <span data-u="arrowleft" class="jssora05l"
					style="top: 158px; left: 8px; width: 40px; height: 40px;"></span>
				<span data-u="arrowright" class="jssora05r"
					style="top: 158px; right: 8px; width: 40px; height: 40px;"></span> -->
			</div>

		</div>
	</div>

	<div class="container">
		<div class="advantage">
			<h3 class="text-center">我们的优势</h3>
			<h3 class="en-tit">
				<span class="line"></span>advantage<span class="line2"></span>
			</h3>
			<ul>
				<cms:ad var="items" code="wmdys"></cms:ad>
				<c:forEach var="item" items="${items }">
					<li><a href="${item.adUrl }"> <img src="${item.adImg }">
							<div class="txt">
								<h3>${item.adTitle }</h3>
								<span>${item.adInfo1 }</span>
								<p>${item.adInfo2 }</p>
							</div></a></li>
				</c:forEach>
			</ul>
		</div>

	</div>
	<div class="clr"></div>
	
<div class="container ">
	<div class=" case university">
		<h3 class="text-center">成功案例</h3>
		<h3 class="en-tit">
			<span class="line"></span>case<span class="line2"></span>
		</h3>
		<div id="product-wrap">
			<ul id="product">
				<cms:ad var="items" code="cgal"></cms:ad>
				<c:forEach var="item" items="${items}">
					<li><a href="${item.adUrl }"> <img src="${item.adImg }"
							alt=""> <span>${item.adTitle}</span>
					</a></li>
				</c:forEach>
			</ul>
			<span class="prev"><span
				class="glyphicon glyphicon-chevron-left"></span></span> <span class="next"><span
				class="glyphicon glyphicon-chevron-right"></span></span>
		</div>
	</div>
	</div>

<div class="container ">
	<div class=" product university">
		<h3 class="text-center">产品展示</h3>
		<h3 class="en-tit">
			<span class="line"></span>product<span class="line2"></span>
		</h3>
		<div id="university-wrap">
			<ul id="university">
				<cms:ad var="items" code="cpzs"></cms:ad>
				<c:forEach var="item" items="${items}">
					<li><a href="${item.adUrl }"> <img src="${item.adImg }"
							alt=""> <span>${item.adTitle}</span>
					</a></li>
				</c:forEach>
			</ul>
			<span class="prev"><span
				class="glyphicon glyphicon-chevron-left"></span></span> <span class="next"><span
				class="glyphicon glyphicon-chevron-right"></span></span>
		</div>
	</div>
	</div>
<%--
	<div class="container ">
		<div class="honor university">
			<h3 class="text-center">荣誉资质</h3>
			<h3 class="en-tit">
				<span class="line"></span>honor<span class="line2"></span>
			</h3>
			<div id="honor-wrap">
				<ul id="honor">
					<cms:ad var="items" code="ryzz"></cms:ad>
					<c:forEach var="item" items="${items}">
						<li> <img src="${item.adImg }"
								alt=""> <span>${item.adTitle}</span>
					</li>
					</c:forEach>
				</ul>
				<span class="prev"><span
					class="glyphicon glyphicon-chevron-left"></span></span> <span class="next"><span
					class="glyphicon glyphicon-chevron-right"></span></span>
			</div>
		</div>
	</div>
	 --%>


	<div class="container">
		<div class="news">
			<h3 class="text-center">行业新闻</h3>
			<h3 class="en-tit">
				<span class="line"></span>news<span class="line2"></span>
			</h3>
			<ul class="row">
				<cms:arts code="hyxw" var="arts" pageNow="0" pageSize="4"></cms:arts>
				<c:forEach items="${arts }" var="item">
					<li class="col-md-6">
						<h4>
							<a href="${path }/redirect/article?id=${item.artId}">${item.artTitle}</a>
						</h4>
						<p>${item.artAbstract}</p> <span> <fmt:formatDate
								value="${item.artCreatetiem }" type="date" /></span>
					</li>
				</c:forEach>
			</ul>
		</div>
	</div>
	
	<cms:ad var="gs" code="gsjs" multi="false"></cms:ad>
	<div class="container introduction">
    <h3 class="text-center">公司介绍</h3>
    <h3 class="en-tit"><span class="line"></span>introduction<span class="line2"></span></h3>
    <div class="company-info">

        <div class="left">
            <h3>${gs.adTitle }</h3>
            <div class="line"></div>
            <div>
           <p>${gs.adInfo1}</p>
             </div>
        </div>
        <div class="right">
            <img src="${gs.adImg }" alt="">
        </div>
    </div>
</div>



	<jsp:include page="_foot.jsp"></jsp:include>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
	
	<script src="${path }/resource/js/plugin/tween.js"></script>
<script src="${path }/resource/js/plugin/util.js"></script>
<script src="${path }/resource/js/plugin/jssor.slider-21.1.6.mini.js"
	type="text/javascript"></script>
<script>
$(".nav-item li").eq(0).addClass("active")
$(".suspend").mouseover(function() {
    $(this).stop();
    $(this).animate({width: 156}, 400);
});
$(".suspend").mouseout(function() {
    $(this).stop();
    $(this).animate({width:36}, 400);
});
~(function () {
    var step = 0;
    function changeImg(obj, len, width) {
        if (step === 0) {
            obj.style.left = 0;
        }
        step++;
        window.tween(obj, {left: -step * width}, 1500);
        if (step >= (len / 4)-1) {
            step = 0;
        }
    }
    function changeImg2(obj, len, width) {
        step--;
        if(step<0)
        {
            step=(len / 4)-2;
            css(obj,"left",-(step+1)*width)
        }
        window.tween(obj,{left:-step*width},1500);
    }
    // 成功案例
    var product_wrap=document.getElementById("product-wrap");
    var next1=document.getElementsByClassName("next")[0];
    var prev1=document.getElementsByClassName("prev")[0];
    product_wrap.onmouseover=function(){
        next1.style.display="block";
        prev1.style.display="block"
    };
    product_wrap.onmouseout=function(){
      next1.style.display="none";
      prev1.style.display="none"
    };
    var product = document.getElementById("product");
    var len1=product.getElementsByTagName("li").length;
    next1.onclick=function () {
        changeImg(product, len1,1160)
    }
    prev1.onclick=function () {
        changeImg2(product, len1, 1160)
    }
    // 产品展示
    var university_wrap=document.getElementById("university-wrap");
    var next2=document.getElementsByClassName("next")[1];
    var prev2=document.getElementsByClassName("prev")[1];
    university_wrap.onmouseover=function(){
        next2.style.display="block";
        prev2.style.display="block"
    };
    university_wrap.onmouseout=function(){
      next2.style.display="none";
      prev2.style.display="none"
    };
    var university = document.getElementById("university");
    var len2=university.getElementsByTagName("li").length;
    next2.onclick=function () {
        changeImg(university, len2,1160)
    }
    prev2.onclick=function () {
        changeImg2(university, len2, 1160)
    }
    // 荣誉资质
  /*  var honor_wrap=document.getElementById("honor-wrap");
    var next3=document.getElementsByClassName("next")[2];
    var prev3=document.getElementsByClassName("prev")[2];
    honor_wrap.onmouseover=function(){
        next3.style.display="block";
        prev3.style.display="block"
    };
    honor_wrap.onmouseout=function(){
      next3.style.display="none";
      prev3.style.display="none"
    };
    var honor = document.getElementById("honor");
    var len3=honor.getElementsByTagName("li").length;
    next3.onclick=function () {
        changeImg(honor, len3,1160)
    }
    prev3.onclick=function () {
        changeImg2(honor, len3, 1160)
    }*/

})() 
	jQuery(document).ready(function($) {

		var jssor_1_SlideshowTransitions = [ {
			$Duration : 1200,
			x : 0.3,
			$During : {
				$Left : [ 0.3, 0.7 ]
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : -0.3,
			$SlideOut : true,
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : -0.3,
			$During : {
				$Left : [ 0.3, 0.7 ]
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			$SlideOut : true,
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : 0.3,
			$During : {
				$Top : [ 0.3, 0.7 ]
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : -0.3,
			$SlideOut : true,
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : -0.3,
			$During : {
				$Top : [ 0.3, 0.7 ]
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : 0.3,
			$SlideOut : true,
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			$Cols : 2,
			$During : {
				$Left : [ 0.3, 0.7 ]
			},
			$ChessMode : {
				$Column : 3
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			$Cols : 2,
			$SlideOut : true,
			$ChessMode : {
				$Column : 3
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : 0.3,
			$Rows : 2,
			$During : {
				$Top : [ 0.3, 0.7 ]
			},
			$ChessMode : {
				$Row : 12
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : 0.3,
			$Rows : 2,
			$SlideOut : true,
			$ChessMode : {
				$Row : 12
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : 0.3,
			$Cols : 2,
			$During : {
				$Top : [ 0.3, 0.7 ]
			},
			$ChessMode : {
				$Column : 12
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : -0.3,
			$Cols : 2,
			$SlideOut : true,
			$ChessMode : {
				$Column : 12
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			$Rows : 2,
			$During : {
				$Left : [ 0.3, 0.7 ]
			},
			$ChessMode : {
				$Row : 3
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : -0.3,
			$Rows : 2,
			$SlideOut : true,
			$ChessMode : {
				$Row : 3
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			y : 0.3,
			$Cols : 2,
			$Rows : 2,
			$During : {
				$Left : [ 0.3, 0.7 ],
				$Top : [ 0.3, 0.7 ]
			},
			$ChessMode : {
				$Column : 3,
				$Row : 12
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			y : 0.3,
			$Cols : 2,
			$Rows : 2,
			$During : {
				$Left : [ 0.3, 0.7 ],
				$Top : [ 0.3, 0.7 ]
			},
			$SlideOut : true,
			$ChessMode : {
				$Column : 3,
				$Row : 12
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			$Delay : 20,
			$Clip : 3,
			$Assembly : 260,
			$Easing : {
				$Clip : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			$Delay : 20,
			$Clip : 3,
			$SlideOut : true,
			$Assembly : 260,
			$Easing : {
				$Clip : $Jease$.$OutCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			$Delay : 20,
			$Clip : 12,
			$Assembly : 260,
			$Easing : {
				$Clip : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			$Delay : 20,
			$Clip : 12,
			$SlideOut : true,
			$Assembly : 260,
			$Easing : {
				$Clip : $Jease$.$OutCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		} ];

		var jssor_1_options = {
			$AutoPlay : true,
			$SlideshowOptions : {
				$Class : $JssorSlideshowRunner$,
				$Transitions : jssor_1_SlideshowTransitions,
				$TransitionsOrder : 1
			},
			$ArrowNavigatorOptions : {
				$Class : $JssorArrowNavigator$
			},
			$ThumbnailNavigatorOptions : {
				$Class : $JssorThumbnailNavigator$,
				$Cols : 10,
				$SpacingX : 8,
				$SpacingY : 8,
				$Align : 360
			}
		};

		var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

		/*responsive code begin*/
		/*you can remove responsive code if you don't want the slider scales while window resizing*/
		function ScaleSlider() {
			var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
			if (refSize) {
				refSize = Math.min(refSize, 800);
				jssor_1_slider.$ScaleWidth(refSize);
			} else {
				window.setTimeout(ScaleSlider, 30);
			}
		}
		ScaleSlider();
		$(window).bind("load", ScaleSlider);
		$(window).bind("resize", ScaleSlider);
		$(window).bind("orientationchange", ScaleSlider);
		/*responsive code end*/
	});
	/* 判断是手机还是电脑 */
	function IsPC() {
	    var userAgentInfo = navigator.userAgent;
	    var Agents = ["Android", "iPhone",
	                "SymbianOS", "Windows Phone",
	                "iPad", "iPod"];
	    var flag = true;
	    for (var v = 0; v < Agents.length; v++) {
	        if (userAgentInfo.indexOf(Agents[v]) > 0) {
	            flag = false;
	            break;
	        }
	    }
	    return flag;
	}
	 
	var flag = IsPC(); //true为PC端，false为手机端
 	if(flag){
		$("#myCarousel").show();
		$("#jssor_1").hide()
	}else{
		$("#myCarousel").hide();
		$("#jssor_1").show()
	}
</script>

</body>
</html>
